<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="../templates/ui.xhtml">


	<ui:define name="content">
		<!--<f:view>
			<ui:param name="originalURL"
				value="#{request.requestURI}?#{request.queryString}" />
			<f:metadata>
				<f:event rendered="#{empty userSession.profile}"
					type="preRenderView"
					listener="#{userSession.setOriginalURL(originalURL)}" />
			</f:metadata>
		</f:view>

		-->
		<h1 class="title ui-widget-header ui-corner-all">Welcome to
			Online Super Market</h1>
		<div class="entry" style="line-height: 200%; height: 350px;">

			<h:form>
				<h:panelGrid columns="4" style="border:none;">
					<!-- <h:panelGrid columns="3" style="border-width:0px;">
					<p:commandButton type="button" onclick="galleria.previous();"
						icon="ui-icon-circle-triangle-w" />
					<p:galleria value="#{homeManagedBean.offersList}" var="image"
						effect="slide" effectSpeed="100" showFilmstrip="false"
						widgetVar="galleria" panelWidth="500" panelHeight="200">
						<p:graphicImage value="#{homeManagedBean.itemImage}"
							alt="#{image.offerName }" title="#{image.offerName }">
							<f:param name="imageId" value="#{image.idoffersTable}" />
						</p:graphicImage>
					</p:galleria>
					<p:commandButton type="button" onclick="galleria.next();"
						icon="ui-icon-circle-triangle-e" />
				</h:panelGrid> 
					 <h:panelGrid columns="3" style="border-width:0px;">
					<p:commandButton type="button" onclick="switcher.previous();"
						icon="ui-icon-circle-triangle-w" />

					<p:imageSwitch effect="fade" widgetVar="switcher"
						slideshowAuto="true">
						<ui:repeat value="#{homeManagedBean.offersList}" var="image">
							<p:graphicImage value="#{homeManagedBean.itemImage}"
								alt="#{image.offerName }" title="#{image.offerName }">
								<f:param name="imageId" value="#{image.idoffersTable}" />
							</p:graphicImage>
						</ui:repeat>
					</p:imageSwitch>
					<p:commandButton type="button" onclick="switcher.next();"
						icon="ui-icon-circle-triangle-e" />
				</h:panelGrid> -->
					<p:carousel pageLinks="4" value="#{homeManagedBean.offersList}"
						var="image" autoPlayInterval="4000" numVisible="1"
						itemStyleClass="carItem" effect="easeInStrong" circular="true">

						<p:graphicImage value="#{homeManagedBean.itemImage}"
							alt="#{image.offerName }" title="#{image.offerName }">
							<f:param name="imageId" value="#{image.idoffersTable}" />
						</p:graphicImage>

					</p:carousel>
					<p:panel header="Latest News" style="height: 255px;width:310px;">
						<h:outputText escape="false"
							value="&lt;marquee scrollamount =&quot;2&quot; direction=&quot;up&quot; behavior=&quot;scroll&quot; &gt; Latest News goes here &lt;/marquee&gt;"></h:outputText>
					</p:panel>
					<p:panel style="height: 255px;width:250px;">
						<iframe
							src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FtestMahesh&amp;width&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=true&amp;stream=false&amp;show_border=false&amp;appId=1447626468801777"
							scrolling="no" frameborder="0"
							style="border: none; overflow: hidden; height: 62px;"
							allowTransparency="true"></iframe>
					</p:panel>
				</h:panelGrid>
			</h:form>


		</div>



	</ui:define>
</ui:composition>